<template>
  <div class="flex-1 h-full">
    <div class="w-full h-full" :class="{ 'overflow-y-scroll': enableScroll }" @click="handlePreviewAreaClick">
      <!-- Banner区域（固定显示） -->
      <div id="banner" class="w-full h-auto">
        <div v-if="bannerModule?.data?.bannerUrl" class="w-full">
          <BannerPreview
            :banner="bannerModule.data"
            :edit="!previewMode"
            :is-active="isBannerActive"
            @click="handleBannerClick"
          />
        </div>
        <div
          v-else
          class="flex-center h-[500px] bg-[#E1E2ED] cursor-pointer"
          :class="{ 'border border-1 border-dashed border-black transition-all duration-300 ease-in-out': isBannerActive }"
          @click="handleBannerClick"
        >
          <el-empty
            :image-size="200"
            :image="EmptyImage"
            class="text-[#595959] pointer-events-none"
            :description="$t('certificate.settingBanner.uploadBanner')"
          />
        </div>
      </div>

      <!-- 动态模块预览列表 -->
      <template v-for="module in modules" :key="`preview-${module.id}`">
        <TitlePreview
          v-if="module.type === 'title'"
          :title="module.data"
          :edit="!previewMode"
          :is-active="isModuleActive(module)"
          @click="handleModuleClick(module)"
        />

        <ContentPreview
          v-else-if="module.type === 'content'"
          :data="module.data"
          :edit="!previewMode"
          :is-active="isModuleActive(module)"
          @click="handleModuleClick(module)"
        />

        <TabsPreview
          v-else-if="module.type === 'tabs'"
          :tabs="module.data"
          :edit="!previewMode"
          :is-active="isModuleActive(module)"
          @update:active="handleTabsActiveUpdate(module, $event)"
          @click="handleModuleClick(module)"
        />

        <TablePreview
          v-else-if="module.type === 'table'"
          :table="module.data"
          :edit="!previewMode"
          :is-active="isModuleActive(module)"
          @click="handleModuleClick(module)"
        />

        <TimelinePreview
          v-else-if="module.type === 'timeline'"
          :timeline="module.data"
          :edit="!previewMode"
          :is-active="isModuleActive(module)"
          @click="handleModuleClick(module)"
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue';
import { $t } from '#/locales';
import { 
  BannerPreview, 
  TitlePreview, 
  ContentPreview, 
  TabsPreview, 
  TablePreview, 
  TimelinePreview 
} from './components/index';
import EmptyImage from "#/assets/images/banner-empty.png";
import type { 
  ModuleInstance, 
  BannerModule, 
  ActiveModule,
  ModuleType,
  ModuleData
} from './components/types';

interface Props {
  modules: ModuleInstance[];
  bannerModule: BannerModule | null;
  activeModule: ActiveModule | null;
  previewMode: boolean;
  enableScroll?: boolean;
}

interface Emits {
  (e: 'module-activate', type: ModuleType, id: string, moduleData?: ModuleData): void;
  (e: 'preview-area-click', event: Event): void;
}

const props = withDefaults(defineProps<Props>(), {
  enableScroll: true
});
const emit = defineEmits<Emits>();

/**
 * 检查Banner是否为当前激活模块
 */
const isBannerActive = computed(() => {
  return props.activeModule?.type === 'banner' && props.activeModule?.id === 'banner_module';
});

/**
 * 检查模块是否为当前激活模块
 */
const isModuleActive = (module: ModuleInstance): boolean => {
  return props.activeModule?.type === module.type && props.activeModule?.id === module.id;
};

/**
 * 处理Banner点击
 */
const handleBannerClick = () => {
  if (props.bannerModule) {
    emit('module-activate', 'banner', 'banner_module', props.bannerModule.data);
  }
};

/**
 * 处理模块点击
 */
const handleModuleClick = (module: ModuleInstance) => {
  emit('module-activate', module.type, module.id, module.data);
};

/**
 * 处理页签激活状态更新
 */
const handleTabsActiveUpdate = (module: ModuleInstance, activeIndex: number) => {
  if (module.type === 'tabs') {
    (module.data as any).active = activeIndex;
  }
};

/**
 * 处理预览区域空白点击
 */
const handlePreviewAreaClick = (event: Event) => {
  emit('preview-area-click', event);
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
